<template>
    <div class="title">
        <h1>非洲国家金融危机分析系统</h1>
    </div>
    <div class="warning">

        <div style="color: red">总数据预警：</div>
        <div>
            在所有的数据中
        </div>
        <div>
            温和通货膨胀率在1-6%的数据占所有数据的 <span style="color: red">{{
                ((filter1.length / allCountryData.length) * 100).toFixed(2)
            }}%</span>
        </div>
        <div>
            严重通货膨胀率在6-9%的数据占所有数据的 <span style="color: red">{{
                ((filter2.length / allCountryData.length) * 100).toFixed(2)
            }}%</span>
        </div>
        <div>
            飞奔通货膨胀率在9-50%的数据占所有数据的 <span style="color: red">{{
                ((filter3.length / allCountryData.length) * 100).toFixed(2)
            }}%</span>
        </div>
        <div>
            恶性通货膨胀率在50%的数据占所有数据的 <span style="color: red">{{
                ((filter4.length / allCountryData.length) * 100).toFixed(2)
            }}%</span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {getAllCountryData} from "@/api/country";

const allCountryData = getAllCountryData();
console.log("所有数据", allCountryData)
const filter1 = allCountryData.filter(item => item.inflationAnnualCpi > 1 && item.inflationAnnualCpi <= 6);
const filter2 = allCountryData.filter(item => item.inflationAnnualCpi > 6 && item.inflationAnnualCpi <= 9);
const filter3 = allCountryData.filter(item => item.inflationAnnualCpi > 9 && item.inflationAnnualCpi <= 50);
const filter4 = allCountryData.filter(item => item.inflationAnnualCpi > 50);
</script>
<style scoped>
.title {
    font-size: 40px;
    display: flex;
    justify-content: center;
}

.warning {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.warning div {
    display: flex;
    justify-content: center;
    gap: 20px;
}
</style>
